<!--conf
<sample>
              <product version="1.4" edition="pro"/>
                     <modifications>
                            <modified date="070101"/>
                     </modifications>
               </sample>
 --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Fast row adding</title>
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<style>
		.even{
			background-color:silver;
		}
		.uneven{
			background-color:white;
		}		
	</style>		
</head>

<body onload='doOnLoad()'>
	<h1>Fast row adding</h1>
	<p>The fastest way for loading data is loading them from XML, in some cases, group of rows must be added by script. 
	The following extension allows to do it much faster (2-5 times faster as compared with normal case)</p>
	<table width="600">
		<tr>
			<td valign="top">
				<div id="gridbox" style="width:450px;height:250px;background-color:white; "></div>
			</td>

		</tr>
		<tr>
			<td>
                <div><input id='z1' type="button"  onclick='adds();' value='add 100 rows'></div>
                <div><input id='z1' type="button"  onclick='add_fast();' value='add 100 rows (fast)'></div>
			</td>
		</tr>
	</table>
<br>


<script>
    function doOnLoad(){
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath("../../../codebase/imgs/");
	mygrid.setHeader("Column A,Column B,Column C");
	mygrid.setInitWidths("150,150,150")
	mygrid.setColAlign("right,left,left")
	mygrid.setColTypes("ed,ed,ed");
	mygrid.setColSorting("int,str,int")
	mygrid.init();
	mygrid.setSkin("dhx_skyblue")
    }
    
    function adds(){
    	mygrid.clearAll();
    	var z=(new Date()).valueOf()
    	for (var i = 99; i >= 0; i--){
    		mygrid.addRow(i,[0,'new',i]);
    	};
    	alert("Time: "+((new Date()).valueOf()-z)+"ms");
    }
	
    function add_fast(){
    	mygrid.clearAll();
    	var z=(new Date()).valueOf()
    	mygrid.startFastOperations();
    	for (var i = 99; i >= 0; i--){
    		mygrid.addRow(i,[0,'fast',i]);
    	};
    	mygrid.stopFastOperations();
    	alert("Time: "+((new Date()).valueOf()-z)+"ms");
    }
</script>

</body>
</html>
